<template>
  <div v-loading="loading" class="app-main-content-box">
    <el-table
      :data="list"
      border
      stripe
      style="width: 100%"
      size="small"
      element-loading-text="加载中"
      empty-text="暂无数据"
    >
      <el-table-column prop="id" label="任务编号" fixed="left" width="100" />
      <el-table-column prop="createTime" label="时间" fixed="left" width="150" />
      <el-table-column prop="originFile" label="操作类型" width="120">
        <template slot-scope="scope">{{ typeOptions[scope.row.type] }}</template>
      </el-table-column>
      <el-table-column prop="originFile" label="操作会员数" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.selectedNumber }}</span>&nbsp;&nbsp;&nbsp;
          <el-button type="text" @click="openFilterRules(scope.row)">查看条件</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="操作内容描述" />
      <el-table-column prop="status" label="执行状态" width="100">
        <template slot-scope="scope">
          <span>{{ statusOption[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="执行结果">
        <template v-if="scope.row.status===3" slot-scope="scope">
          <span>成功数据 {{ scope.row.successNumber }} 条，异常数据 {{ scope.row.failNumber }} 条</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.failNumber"
            type="text"
            size="small"
            @click="openFailList(scope.row)"
          >查看失败数据</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination-direction
      v-if="paginationConfig.total!==0"
      :config="paginationConfig"
      @sizeschange="sizesChange"
      @pagechange="pageChange"
    />

    <!-- 组件 -->
    <DialogFailList ref="dialogFailList" />
    <DialogFilterRules ref="dialogFilterRules" />
  </div>
</template>

<script>
import { memberBatchJobList } from '@/api/vip'
import DialogFailList from './DialogFailList'
import DialogFilterRules from './DialogFilterRules'
export default {
  components: {
    DialogFailList,
    DialogFilterRules
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      typeOptions: {
        1: '余额充值',
        2: '余额扣除',
        3: '赠送积分',
        4: '积分扣除',
        5: '赠送优惠券',
        6: '打标签'
      },
      statusOption: ['', '待处理', '处理中', '已完成'],
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: null,
      loading: false,
      // 数据
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
       * 数据组
       */
    // 获取数据
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.loading = true
      const params = {}
      params.page = page
      params.pageSize = pageSize
      memberBatchJobList(params)
        .then((res) => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    /**
       * 按钮组
       */
    // 查看条件
    openFilterRules(row) {
      this.$refs.dialogFilterRules.open({ row }).then((res) => {})
    },

    // 查看失败记录
    openFailList(row) {
      this.$refs.dialogFailList.open({ row }).then((res) => {})
    }

    /**
       * 状态组
       */

    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
